<!-- Datatables -->
<link href="cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css"/>
<link href="/vendors/datatables.net-bs/css/dataTables.bootstrap.min.css" rel="stylesheet"/>

  <div id="applyTest" class="widthcolumn3-one clearfix">
    <h2 class="heading2" style="margin-left: 45%;margin-top: 3%">报名考试</h2>
    <table id="modelTable" class="table table-striped table-bordered"
           style="width:100%">
      <thead>
      <tr>
        <th>试卷Id</th>
        <th>试卷类型</th>
        <th>考试时间</th>
        <th>总分</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody style="text-align: center;">
      </tbody>
    </table>
  </div>

  <div class="widthcolumn4 last">
    <h3 class="heading3">报名考试信息</h3>
    <p> 欢迎<br>
      参加报名<br>
      考试<br>
      <br>
      Phone: (123) 456-7890<br>
      Fax: (123) 456-7890<br>
      Email: team@contactus.com<br>
    </p>
  </div>

<!-- Datatables -->
<script src="/vendors/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="/vendors/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>

  <script type="text/javascript">
    var applyTestVue = new Vue({
      el:"#applyTest",
      data:{
        dataModel:{
          id:"",
          subject:"",
          totalTime:"",
          totalScore:"",
        },

        // 默认页长
        defaultPageSize: 5,
        // 定义searchBean
        searchBean: {
          currentPage: 1,
          pageSize: 5,
          orderBy: "id",
          direction: "asc",
          keyWord: "",
        },
        // 定义表格数据结构
        tableData: {
          draw: 0,
          recordsTotal: 0,
          recordsFiltered: 0,
          data: [],
        },

      },
      methods: {
        // 行数据结构定义函数
        rowData: function (id, subject, totalTime, totalScore) {
          //新创建一个行的js对象
          var row = {};
          row.id = id;
          row.subject = subject;
          row.totalTime = totalTime;
          row.totalScore = totalScore;
          row.operate = function () {
            return (
                    "<a onclick='insertApproval(this)' href='#' class='btn_editcolor'>确定报名</a>&nbsp;"
            );
          };
          return row;
        },
        // 初始化表格数据
        initTable: function (pageSize) {
          var self = this;
          //DataTable是引入的函数
          $("#modelTable").DataTable({
            paging: true, //分页
            serverSide: true, //开启后端分页
            pagingType: "full_numbers", //分页样式的类型simple/simple_numbers/full/full_numbers
            pageLength: pageSize, //定义初始的页长
            processing: true,
            destroy: true, //允许销毁替换，在表格重新查询时，可以自动销毁以前的data
            lengthChange: true, //控制是否能够调整每页的条数
            lengthMenu: [5, 10, 25, 50], // 控制页长(页码的选择)
            searching: true,
            "data-show-refresh": true,
            ordering: true,
            autoWidth: true,
            ajax: function (data, callback, settings) {
              // 从data获取查询数据，包装searchBean
              var columnIndex = data.order[0].column;//当前操作列的下标
              var direction = data.order[0].dir;
              var orderBy = data.columns[columnIndex].name;
              pageSize = data.length == undefined ? pageSize : data.length;

              self.searchBean.currentPage = data.start / pageSize + 1;//当前页
              self.searchBean.pageSize = pageSize;
              self.searchBean.orderBy = orderBy;
              self.searchBean.direction = direction;
              self.searchBean.keyWord = data.search.value;

              $.ajax({
                url: "/api/papers",
                type: "post",
                contentType: "application/json",
                data: JSON.stringify(self.searchBean),
                success: function (rs) {
                  if (!rs) {
                    layer.alert("请求出错，请稍后重试" + rs.errmsg, {icon: 2});
                    callback(self.tableData);
                    return;
                  }
                  if (rs.list == null) {
                    $("#moduleTable tbody tr").remove();
                    $("#loading").remove();
                    callback(self.tableData);
                    return;
                  }
                  $("#loading").remove();
                  //定义一个数组来装行数据
                  var rowsData = [];
                  $.each(rs.list, function (i, item) {
                    //调用定义行数据的函数，包装行数据
                    var rowData = self.rowData(
                            item.id,
                            item.subject,
                            item.totalTime,
                            item.totalScore
                    );
                    // 将行数据放到数组里
                    rowsData.push(rowData);
                  });
                  //赋值给表格的数组结构
                  self.tableData.data = rowsData;
                  self.tableData.recordsTotal = rs.total;
                  self.tableData.recordsFiltered = rs.total;
                  callback(self.tableData);
                },
                error: function (data) {
                  layer.alert(data.responseText, {icon: 0});
                },
              });
            },
            //列的定义
            columns: [
              //定义行数据字段
              {data: "id", name: "id", sortable: true},//可排序
              {data: "subject", name: "subject", sortable: true},
              {data: "totalTime", name: "total_time", sortable: true},
              {data: "totalScore", name: "total_score", sortable: true},
              {data: "operate", width: "80px", sortable: false},
            ],
          });
        },
        insertApproval:function (object) {
          var paperId = $(object).parent().parent().find("td").eq(0).text();
          $.ajax({
            url:"/api/approval/" + paperId,
            type:"get",
            success:function (result) {
              layer.alert(result.message, {icon: 0});
            }
          })
        }
      },
      created:function(){
        window.insertApproval = this.insertApproval;
      },
      mounted:function () {
        this.initTable(this.defaultPageSize);
      },
    });
  </script>
<!--Middle container End-->